<!-- 设备返修返厂 -->
<template>
  <a-modal v-model="visible" :title="title" width="660px" @ok="onSubmit" @cancel="cancel" centered>
    <a-form-model ref="ruleForm" class="ant-advanced-form" :model="data" :rules="rules">
      <a-form-model-item label="物流公司" prop="logisticsType" class="form-w-95" :colon="false">
        <a-select style="width:278px;" v-model="data.logisticsType" placeholder="请选择物流公司" @change="changelogisticsType">
          <a-select-option v-for="(item, index) in listByLogistics" :key="index" :value="item.id">
            {{ item.name }}</a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="物流单号" prop="logisticsNo" class="form-w-95" :colon="false">
        <a-input style="width:276px;" v-model="data.logisticsNo" placeholder="请输入物流单号" :maxLength="25" />
      </a-form-model-item>

      <a-form-model-item label="物流凭证" style="margin-bottom:0 !important;" prop="attachmentIds" :colon="false"
        class="form-w-95">
        可上传物流凭证图片，最多9张
        <a-upload :accept="imageAccept" :action="returnBackUploadUrl" list-type="picture-card"
          :file-list="imagesList" @preview="uploadImgPreview" :headers="uploadHead"
          @change="uploadImgChange">
          <div v-if="imagesList.length < 9">
            <a-icon type="plus" />
            <div class="ant-upload-text">上传图片</div>
          </div>
        </a-upload>
      </a-form-model-item>

      <a-form-model-item :colon="false" label="备注信息" prop="remarks" class="form-w-95"
        style="position: relative;">
        <a-textarea style="width:500px;" :maxLength="100" placeholder="请输入备注" :rows="4" v-model="data.remarks">
        </a-textarea>
        <span style="position: absolute;right:10px;bottom: -4px;color: #999999;">{{ data.remarks
    && data.remarks.length + '/' + '100' }}</span>
      </a-form-model-item>

    </a-form-model>
    <imgPreview v-model="preview.visible" :imgList="[preview.image]" />
  </a-modal>
</template>

<script>
import { listByName, deviceRepairDeliveryUploadImage, deviceRepairDeliveryReturnFactory } from '@/services/commonApi'
import imgPreview from '@/components/img-preview'
import { getAuthorizationHead } from '@/utils/request.js'
import { imageAccept } from '@/utils/options'
import { getBase64 } from '@/utils/util.js'
export default {
  components: {
    imgPreview
  },
  data () {
    return {
      imageAccept,
      title: '返厂',
      visible: false,
      uploadHead: getAuthorizationHead(),
      returnBackUploadUrl: deviceRepairDeliveryUploadImage(),
      data: {},
      rules: {
        logisticsType: [
          { required: true, message: '请选择物流公司', trigger: 'change' }
        ],
        logisticsNo: [
          { required: true, message: '请输入物流单号', trigger: 'blur' }
        ],
        attachmentIds: [
          { required: true, message: '请上传物流凭证', trigger: 'change' }
        ],
        remarks: [
          { required: true, message: '请输入备注信息', trigger: 'blur' }
        ]
      },
      imagesList: [],
      preview: {
        visible: false,
        image: ''
      },
      listByLogistics: []
    }
  },
  methods: {
    cancel () {
      this.$refs.ruleForm.resetFields()
      this.visible = false
      this.data = {}
      this.imagesList = []
    },
    open (record) {
      this.data = {
        deviceRepairId: record.id
      }
      this.visible = true
      this.getLogisticsList()
    },
    async submit () {
      const res = await deviceRepairDeliveryReturnFactory(this.data)
      const { isSuccess, msg } = res
      if (isSuccess) {
        this.$message.newFun('已经发货成功！', 'success', 3)
        this.cancel()
        this.$emit('getList', this.id)
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    onSubmit () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.submit()
        }
      })
    },
    async uploadImgPreview (file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.preview.image = file.url || file.preview
      this.preview.visible = true
    },
    uploadImgChange ({ fileList }) {
      this.imagesList = fileList.filter(f =>
        imageAccept.split(',').includes(f.type)
      )
      for (let i = 0; i < this.imagesList.length; i++) {
        const d = this.imagesList[i]
        if (d.status === 'done' && Object.hasOwnProperty.call(d, 'response')) {
          if (d.response.isSuccess) {
            if (d.size > 1024 * 1024 * 10) {
              this.$message.newFun('上传文件大小不能超过10MB', 'error', 3)
              this.imagesList.splice(i, 1)
            } else {
              this.imagesList.splice(i, 1, {
                name: d.name,
                status: d.status,
                type: d.type,
                uid: d.uid,
                id: d.response.data.id,
                url: d.response.data.url
              })
            }
          } else {
            this.imagesList.splice(i, 1)
            this.$message.newFun(d.response.msg, 'error', 3)
          }
        }
      }
      if (this.imagesList.length > 0) {
        this.$set(this.data, 'attachmentIds', this.imagesList.map(item => item.id))
      } else {
        delete this.data.attachmentIds
      }
    },
    async getLogisticsList () {
      const res = await listByName({ typeName: '快递公司' })
      const { isSuccess, data: response, msg } = res
      if (isSuccess) {
        this.listByLogistics = response
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    changelogisticsType (e) {
      this.data.logisticsName = this.listByLogistics.find(item => item.id === e)?.name
    }
  }
}
</script>

<style lang="less" scoped>

</style>
